import { Tabs, WhiteSpace } from 'antd-mobile';
import React, { useEffect } from 'react';
import './community.css';
import CommunitySearch from './CommunitySearch'
import Search_img from './Search_img'
import { TextCreator, ImgCreator, DelCommunity, getAdmin } from '../Redux/ActionCreator';
import { connect } from 'react-redux';
import GotoPage from './GotoPage';
import GotoPage2 from './GotoPage2';
import { Send_tim } from '../IM/actiontim';
import ReactTooltip from 'react-tooltip'
//动态管理右半部分页面
const tabs = [
    { title: '文字管理' },
    { title: '图片管理' }
];

const Community = (props) => {
    useEffect(() => {
        props.dispatch(TextCreator())
        props.dispatch(ImgCreator())
    }, [])
    console.log(props)
    return (
        <div className="body_right">
            <div className='right_top'>
                <p>动态管理</p>
            </div>
            <div className='right_middle'>
                <WhiteSpace />
                <Tabs tabs={tabs} initialPage={0} animated={true} useOnPan={false}>
                    <div className='search'>
                    <p>输入查找的内容</p>                        
                        <CommunitySearch />
                        <div className='texttable'>
                            <table border='0' cellpadding='5' cellspacing='0' className='mytable'>
                                <thead>
                                    <tr>
                                        <th>编号</th>
                                        <th>ID</th>
                                        <th>创建者ID</th>
                                        <th>标题</th>
                                        <th>内容</th>
                                        <th>时间</th>
                                        <th>操作</th>
                                        <th style={{ width: '5px' }}></th>
                                    </tr>
                                </thead>
                                <tbody id='mainbody'>
                                    {
                                        props.textreducer.map((item, index) => {
                                            return (
                                                <tr>
                                                    <td>{index + 1}</td>
                                                    <td>{item.dynamic_id}</td>
                                                    <td>{item.userd_id}</td>
                                                    <td>{item.dynamic_title}</td>
                                                    <td
                                                        data-tip={item.dynamic_context}
                                                        data-place={'bottom'}
                                                        data-html={true}
                                                        data-class='my-tabcolor'>{item.dynamic_context}</td>
                                                    <td>{item.dynamic_time}</td>
                                                    <td>
                                                        <button className="delete"
                                                            onClick={() => {
                                                                const adminpwd = prompt('请输入管理员登录密码：')
                                                                if (adminpwd) {
                                                                    props.dispatch(DelCommunity(item.dynamic_id, getAdmin(props).admin_id, adminpwd))
                                                                    let res = props.userreducer.filter((item2) => {
                                                                        return item2.user_id == item.userd_id
                                                                    })
                                                                    Send_tim(res[0].user_phone, `您于${item.dynamic_time}发布的动态<${item.dynamic_context}>已被删除`)
                                                                }
                                                                return false;
                                                            }}
                                                        >删除</button></td>
                                                    <ReactTooltip html={true} />
                                                </tr>
                                            )
                                        })
                                    }
                                </tbody>
                            </table>
                        </div>
                        {/* 分页 */}
                        <GotoPage />
                    </div>
                    <div className='search'>
                        <div className='imgtable'>
                            <table border='0' cellpadding='5' cellspacing='0' className='mytable2'>
                                <thead>
                                    <tr>
                                        <th>编号</th>
                                        <th>ID</th>
                                        <th>图片</th>
                                    </tr>
                                </thead>
                                <tbody id='mainbody2'>
                                    {
                                        props.imglist.map((item, index) => {
                                            return (
                                                <tr>
                                                    <td>{index + 1}</td>
                                                    <td>{props.imglist[index].dynamic_id}</td>
                                                    <td id='community_pic'><img key={index} src={`http://www.h5weixin.club:1025/api/image/${item.dynamic_pic_url}`} /></td>
                                                </tr>
                                            )
                                        })
                                    }
                                </tbody>
                            </table>
                        </div>
                        {/* 分页 */}
                        <GotoPage2 />
                    </div>
                </Tabs>
                <WhiteSpace />
            </div>
        </div>
    );
}

const mapStateToProps = (state) => ({
    textreducer: state.textreducer,
    imglist: state.imgreducer.imglist,
    userreducer: state.userreducer
})
export default connect(mapStateToProps)(Community);